<div class="vt-workflow-padding" *ngIf="workflow">
  <p-accordion >
    <span >
      <p-accordionTab class="{{getState(workflow.state)}}">
        <header class="vt-pad-header">
          <div class="vt-accordion-name-wrapper">
            <span class="vt-accordion-name">
              <md-icon *ngIf="workflow.isNotStarted()">remove</md-icon>
              <md-icon *ngIf="workflow.isRunning()">forward</md-icon>
              <md-icon *ngIf="workflow.isDone()">check</md-icon>
              {{workflow.name}}
            </span>
          </div>
          <div class="vt-progress-bar-wrapper">
            <md-progress-bar class="vt-progress-bar" *ngIf="workflow.isDeterminate()" mode="determinate" [value]="workflow.progress" color="primary"></md-progress-bar>
            <md-progress-bar class="vt-progress-bar" *ngIf="workflow.isIndeterminate()" mode="indeterminate" color="primary"></md-progress-bar>
          </div>
          <div class="vt-progress-msg-wrapper" *ngIf="workflow.isDeterminate() || workflow.isIndeterminate()" >
            <span class="vt-progress-msg">
              {{workflow.progressMsg}}
            </span>
          </div>
          <div class="vt-workflow-action-wrapper" *ngIf="workflow.isRoot()">
            <span class="vt-workflow-action">
              <button md-raised-button *ngIf="workflow.isNotStarted()" (click)="startClicked($event); false">Start</button>
              <button md-raised-button *ngIf="workflow.isRunning()" (click)="stopClicked($event); false">Stop</button>
              <button md-raised-button *ngIf="!workflow.isRunning()" (click)="deleteClicked($event); false">Delete</button>
            </span>
          </div>
        </header>
        <div class="vt-workflow-content">
          <div *ngIf="getTime()" class="vt-workflow-time">
            Last Change: {{getTime()}}
          </div>
          <div class="vt-msg">
            {{workflow.message}}
          </div>
          <div class="vt-log vt-workflow-padding">
            <p-accordion>
              <p-accordionTab [disabled]="workflow.log.length === 0">
              <header class="vt-pad-header">
                <span class="vt-accordion-name">
                  Log
                </span>
              </header>
              <div class="vt-log-text vt-workflow-padding">{{workflow.log}}</div>
              </p-accordionTab>
            </p-accordion>
          </div>
          <div class="vt-actions">
            <span *ngFor="let action of workflow.actions">
              <button md-raised-button disableRipple=true [disabled]="action.isDisabled()" (click)="actionClicked(action.name);" class="{{getActionClass(action.style)}}">{{action.name}}</button>
            </span>
          </div>
        </div>
        <vt-workflow *ngFor="let child of workflow.children; let i = index" [workflow]="workflow.children[i]" [workflowListComponent]="workflowListComponent"></vt-workflow>
      </p-accordionTab>
    </span>
  </p-accordion>
</div>
